<template>
 <div class="block text-center">
    <span class="demonstration"></span>
    <el-carousel height="350px">
      <el-carousel-item v-for="item in lists" :key="item">
        <img :src="item.img" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
  <div>
    <el-input class="wrapper"  v-model="searchText" placeholder="请输入查询的商品名称" @keyup.enter="handleSearch"></el-input>
  </div>
  <div> <el-icon><Search /></el-icon></div>
  <!--商品分类-->
        <Itemcla/>
</template>

<script>
import Itemcla from '@/components/front/Itemcla.vue';
export default {
  data() {
    return {
      lists: [
        {
          img:
            '	https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f9ff7ab2bd81728189a08fadb8ccf0e9.jpg'
        },
        {
          img:
            'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8e8803e2c8bdd75b3a43b847c5a2f160.jpg'
        },
        {
          img:
           'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/69d4b845cf7409fff4ede9bb31e25643.jpg'
        },
        {
          img:
           'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/69d4b845cf7409fff4ede9bb31e25643.jpg'
        }
      ],
      searchText:''
    }
  },
  methods: {
    handleSearch() {
      // 处理搜索逻辑
    }
  },
  components: {
      Itemcla
    },
}
</script>

<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-input{
  position :relative;
  margin-top:-400px;
  width:800px;
  height: 50px;
  margin-left: 550px;
  background: rgba(0,0,0, .2);
}
.wrapper{
  background:rgba(0,0,0, .2);
  border-radius: 30px;
}
.el-icon{
  position:absolute;
  float: left;
  margin-left: 1310px;
  margin-top: -215px;
}
.subs li {
    width: 316px;
    height: 170px;
    margin-left: 15px;
  }
  .subs :hover {
    box-shadow: 0 5px 30px #ccc;
  }
  .subs img {
    display: block;
    width: 316px;
    height: 170px;
  }
  .subs {
    display: block;
    transition: all 0.3s;
  }
  .subs {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .line-vertical {
    width: 1px;
    height: 60px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.1);
  }
  
  .line-horizontal {
    width: 60px;
    height: 1px;
    margin: 0 8px;
    background: rgba(255, 255, 255, 0.1);
  }
</style>